<template>
  <div>
    <el-form ref="form" :model="searchData" label-width="100px">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in searchConfig" :key="index" :span="5">
          <el-form-item :label="item.label">
            <el-input
              v-if="item.type === 'input'"
              v-model="searchData[item.prop]"
            />
            <el-select
              v-if="item.type === 'select'"
              v-model="searchData[item.prop]"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-date-picker
              v-if="item.type === 'daterange'"
              v-model="searchData[item.prop]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    searchConfig: {
      type: Array as () => SearchItem[],
      required: true
    }
  },
  setup(props, { emit }) {
    const searchData = ref<Record<string, any>>({});

    const onSearch = () => {
      emit("search", searchData.value);
    };

    return {
      searchData,
      onSearch
    };
  }
});
</script>
